<template>
  <div>
    <!-- header -->
    <TitleCompound :title="title"></TitleCompound>

    <!-- content -->
    <div class="flex flex-col justify-center items-center">
      <div class="flex flex-row justify-center items-center">

        <el-text class="mx-1 counter" type="primary">counter: {{ counterStore.count }}</el-text><br>
        <el-button @click="counterStore.decrement" type="primary">-</el-button>
        <el-button @click="counterStore.increment" type="primary">+</el-button>
        <h3>Persons:</h3>
        <el-table :data="personStore.persons" style="width: 100%">
          <el-table-column prop="id" label="ID" width="240" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="age" label="Age" width="180" />
          <el-table-column prop="gender" label="Gender" width="180" />
        </el-table>

        <h3>Add Person:</h3>
        <el-form :inline="true" :model="p">
          <el-form-item label="Name">
            <el-input v-model="p.name" placeholder="Name" />
          </el-form-item>
          <el-form-item label="Age">
            <el-input v-model="p.age" placeholder="Age" />
          </el-form-item>
          <el-form-item label="Gender" trigger="hover">
            <el-dropdown>
              <el-button>
                {{ p.gender }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="gender in genderList" :key="gender" @click="getFormGender(gender)">
                    {{ gender }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-form-item>
        </el-form>
        <el-button @click="addPerson" type="primary">Add Person</el-button>
      </div>
    </div>

  </div>
</template>
<script lang="ts" setup>
import TitleCompound from '@/components/TitleCompound.vue';
import { useCounterStore } from "@/stores/counter";
import { usePersonStore } from "@/stores/Person";
import type { Person } from '@/types';
import { ref, toValue } from 'vue';
import { nanoid } from 'nanoid';

const title = "Pinia quickstart - Father"

const counterStore = useCounterStore()
const personStore = usePersonStore()


const p = ref<Person>({ name: '', age: 0, gender: 'male' })

const genderList: string[] = ['male', 'female']
function getFormGender(gender: string) {
  p.value.gender = gender
}

function addPerson() {
  // const pVaule: Person = toValue(p.value)
  const pVaule: Person = toValue(p)
  pVaule.id = nanoid()
  personStore.addPerson(pVaule)
  p.value = { name: '', age: 0, gender: 'male' }
}

</script>
<style lang="scss" scoped>
.counter {
  font-size: 30px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 800;
}
</style>
